<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page" />
<!DOCTYPE html>
<html>
<head>
    <title>Insert title here</title>
    <link rel="stylesheet" href="${ctx}/css/templatemo_style.css"/> <!-- 页面整体布局样式定义 -->
    <link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css" /> <!-- 菜单样式定义 -->
    <script type="text/javascript" src="${ctx}/js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript">
        var ctx = "${pageContext.request.contextPath}";
        function showUserName(){
            var name = "${user.userName}";
            if(name != ""){
                $("#login").html(name);
                $("#exitP").show();
                $("#login").attr("href", ctx + "/user?flag=finduser&username=${user.userName}");
            }else{
                $("#login").html("登录");
                $("#exitP").hide();
                $("#login").attr("href", ctx + "/user?flag=lp");
            }
        }

        /*$(function () {
            $("#receiver").blur(function(){
                var reg=/^[\u4e00-\u9fa5]{2,4}$/;
                var reg1=$("#phone").val();
                if(reg.test(reg1))
                {
                    $("#receiver").css("color","green");
                }
                else
                {
                    alert("收货人姓名不对");
                }
            });
            $("#zipcode").blur(function(){
                var reg=/^\d{6}$/;
                var reg1=$("#phone").val();
                if(reg.test(reg1))
                {
                    $("#zipcode").css("color","green");
                }
                else
                {
                    alert("邮编不对");
                }
            });
            $("#telphone").blur(function(){
                var reg=/^1{35 | 38 | 88 | 89}\d{8}$/;
                var reg1=$("#phone").val();
                if(reg.test(reg1))
                {
                    $("#telphone").css("color","green");
                }
                else
                {
                    alert("电话位数不对");
                }
            });
        });*/

    </script>
</head>
<body>
<%
    response.setCharacterEncoding("utf-8");
%>
<div id="templatemo_body_wrapper">
    <div id="templatemo_wrapper">


        <!-- header -->
        <div id="templatemo_header">
            <div id="site_title"><h1><a href="${ctx}/home">穿美在线鞋城</a></h1></div>
            <div id="header_right">
                <p>
                    <a href="${ctx}/user?flag=toLogin" id="login">登录</a>&nbsp;
                    <span id="exitP" style="display: none"><a href="${ctx}/user?flag=logout" id="exit">注销</a></span>
                </p>
            </div>
            <div class="cleaner"></div>
        </div>
        <!-- END of templatemo_header -->


        <!-- menu -->
        <div id="templatemo_menubar">
            <div id="top_nav" class="ddsmoothmenu">
                <ul>
                    <li><a href="${ctx}/home" class="selected">首页</a></li>
                    <li><a href="${ctx}/product">产品</a></li>
                    <li><a href="${ctx}/shopcart?&userId=${sessionScope.user.userId}">我的购物车</a></li>
                    <li><a href="${ctx}/order">我的订单</a></li>
                </ul>
                <br style="clear: left" />
            </div> <!-- end of ddsmoothmenu -->
        </div><!-- END of templatemo_menubar -->


        <!-- main -->
        <div id="templatemo_main">
            <!-- 侧边栏 -->
            <div id="sidebar" class="float_l">
                <!-- sidebar 1 -->
                <div class="sidebar_box"><span class="bottom"></span>
                    <h3>品牌</h3>
                    <div class="content">
                        <ul class="sidebar_list">
                            <c:forEach items="${requestScope.categorys}" var="c">
                                <li><a href="${ctx}/product?categoryId=${c.categoryId}">${c.name}</a></li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
                <!-- sidebar 2 -->
                <div class="sidebar_box"><span class="bottom"></span>
                    <h3>热卖单品 </h3>
                    <div class="content">
                        <c:forEach items="${requestScope.hotSales}" var="hot">
                            <div class="bs_box">
                                <a href="${ctx}/product?productId=${hot.productId}&flag=d"><img src='${ctx}/${hot.imgpath}' alt="image" style="width:62px;height:72px"/></a>
                                <p><c:out value="${hot.feature}"></c:out></p>
                                <p class="price">￥${hot.price}</p>
                                <div class="cleaner"></div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div><!-- END of sidebar -->

            <!-- 内容展示区 -->
            <div id="content" class="float_r">
                <form action="${ctx}/shopcart" method="post" id="saform">
                    <input type="hidden" id="flag" name="flag" value="js" />
                    <input type="hidden" id="payment" name="payment" value="" />
                    <input type="hidden" id="userId" name="userId" value="${user.userName}" />
                    <input type="hidden" id="amount" name="amount" value="${zong}" />
                    <!-- 结算  -->
                    <h3>结算</h3>
                    <p style="font-size: 14px;">收货人信息</p>
                    <div class="shopcart_box_detail_l">
                        <p class="product_price">收货人姓名:<input type="text" id="receiver" name="receiver"></p>
                        <p class="product_price">省份:<input type="text" id="province" name="province"></p>
                        <p class="product_price">城市:<input type="text" id="city" name="city"></p>
                        <p class="product_price">区、县:<input type="text" id="county" name="county"></p>
                    </div>
                    <div class="shopcart_box_detail_r">
                        <p class="product_price">地址:<input type="text" id="address" name="address"></p>
                        <p class="product_price">邮编:<input type="text" id="zipcode" name="zipcode"></p>
                        <p class="product_price">电话:<input type="text" id="telphone" name="telphone"></p>
                    </div>

                </form>
            </div>

            <div id="content" class="float_r shopcart_pay">
                <!-- 购物车内容 -->
                <p style="font-size: 14px;">购物车</p>
                <div class="shopcart_pay_l">
                    <p class="product_price">总金额：${zong}</p>
                </div>

                <div class="shopcart_pay_xy">
                    <input type="checkbox" id="xieyi" name="xieyi">我接受本网站的使用条款 <br/>
                </div>

                <div class="shopcart_pay_type">
                    <div class="shopcart_pay_type_img"><img alt="" src="${ctx}/images/alipay.jpg"></div>
                    <div  class="shopcart_pay_type_desc">推荐使用支付宝付款，使用红包支付，更多实惠！</div>
                    <div class="shopcart_pay_type_zf"><a href="#" id="zfb" >支付宝支付</a></div>
                </div>

                <div class="shopcart_pay_type">
                    <div class="shopcart_pay_type_img"><img alt="" src="${ctx}/images/wechat.jpg"></div>
                    <div  class="shopcart_pay_type_desc">没有支付宝帐户，不用担心，我们也支持微信支付！</div>
                    <div class="shopcart_pay_type_zf"><a href="#" id="wx" >微信支付</a></div>
                </div>

                <div class="shopcart_pay_back">
                    <p style="font-size: 14px;"><a href="${ctx}/shopcart?flag=bl&userId=${sessionScope.user.userId}">暂不结算,返回购物车</a></p>
                </div>
            </div>

            <div class="cleaner"></div>
        </div><!-- END of templatemo_main -->


        <!-- footer -->
        <div id="templatemo_footer">
            <p>
                <a href="${ctx}/home">首页</a> | <a href="${ctx}/product">产品</a> | <a href="${ctx}/shoppingCar">我的购物车</a> | <a href="/order">我的订单</a>
            </p>
            版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
        </div><!-- END of templatemo_footer -->


    </div><!-- END of templatemo_wrapper -->
</div><!-- END of templatemo_body_wrapper -->
<script type="text/javascript">
    $(function(){
        showUserName();

        $("#wx").click(function(){
            $("#payment").val(1);
            var chbox = $("#xieyi").attr("checked");
            if(chbox == true){
                $("#saform").submit();
            }else{
                alert("请接受本网站的使用条款 ");
                return;
            }
        });

        $("#zfb").click(function(){
            $("#payment").val(2);
            var chbox = $("#xieyi").attr("checked");
            if(chbox == true){
                $("#saform").submit();
            }else{
                alert("请接受本网站的使用条款 ");
                return;
            }
        });

    });
</script>
</body>
</html>
